<template>
    <div>
        <div id="main1" style="width: 100%;height: 340px; margin-top: 50px;margin-left: 100px;"></div>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
export default {


    methods: {
        // getData(){
        //     this.$request({
        //   url: '/home/getHome',
        //   method: 'get'
        //   }).then(res => {
        //    this.Draw(res.data.orderPrices)
        //     })
        // },


        Draw(data){
            var  chartLine = echarts.init(document.getElementById('main1'));

            console.log(data, 'orderPrice')

                var list = [];
                var listNum = [];

     data.forEach(item => {
         list.push(item.val);
         listNum.push(item.valName);
     })
// 指定图表的配置项和数据
var option = {
tooltip: {              //设置tip提示
   trigger: 'axis'
},

legend: {               //设置区分（哪条线属于什么）
  left: 'right',
   data:['金额']
},
color: ['#8AE09F', 'black'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
xAxis: {                //设置x轴
   type: 'category',
   boundaryGap: false,     //坐标轴两边不留白
   data: listNum,
            //X轴 name
   nameTextStyle: {        //坐标轴名称的文字样式
       color: 'black',
       fontSize: 16,
       padding: [0, 0, 0, 20]
   },
   axisLine: {             //坐标轴轴线相关设置。
       lineStyle: {
           color: 'black',
       }
   }
},
yAxis: {
   name: '7日成交金额',
   nameTextStyle: {
       color: 'black',
       fontSize: 16,
       fontWeight: 700,
       padding: [0, 0, 10, 0]
   },
   axisLine: {
       lineStyle: {
           color: 'black',
       }
   },
   type: 'value'
},
series: [
 {
   name: '金额',
   data:  list,
   type: 'line',               // 类型为折线图
   lineStyle: {                // 线条样式 => 必须使用normal属性
       normal: {
           color: '#8AE09F',
       }
   },
 },
]
};

// 使用刚指定的配置项和数据显示图表。
chartLine.setOption(option);
        }
       
    },





//     mounted() {
//      this.getData()
// },
}
</script>
<style>

</style>